<template>
	<view class="detail card">
		<view class="flex flex-col justify-between flex-1 h-full">
			<view class="record-content">
				<view
					class="flex title justify-between"
					@click="() => (isCollapse = !isCollapse)">
					<text>检验项目信息</text>
					<u-icon
						v-show="!isCollapse && taskInfo?.id"
						name="arrow-up"
						color="#000a7b"></u-icon>
					<u-icon
						v-show="isCollapse && taskInfo?.id"
						name="arrow-down"
						color="#000a7b"></u-icon>
				</view>
				<view
					v-show="!taskInfo?.id"
					class="grey1-color flex justify-start"
					style="margin-bottom: 12px">
					暂无检验项目信息，请选择检验项目
				</view>
				<view class="record-item" v-show="taskInfo?.materialCode">
					<text>物料编号</text>
					<text>{{ taskInfo?.materialCode || "" }}</text>
				</view>
				<view class="record-item" v-show="taskInfo?.materialBatch">
					<text>批次号</text>
					<text>{{ taskInfo?.materialBatch || "" }}</text>
				</view>
				<view v-show="!isCollapse && taskInfo?.id">
					<view class="record-item" v-show="taskInfo?.materialSerial">
						<text>序列号</text>
						<text>{{ taskInfo?.materialSerial || "" }}</text>
					</view>
					<view class="record-item" v-show="taskInfo?.equipName">
						<text>设备名称</text>
						<text>{{ taskInfo?.equipName || "" }}</text>
					</view>
					<view class="record-item" v-show="taskInfo?.processCode">
						<text>工序</text>
						<text>{{ taskInfo?.processCode || "" }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup name="DeviceInfoTemplate">
const props = defineProps({
	taskInfo: {
		type: Object,
		default: () => {},
	},
});

const { taskInfo } = toRefs(props);

// 是否折叠
const isCollapse = ref(false);
</script>

<style lang="scss" scoped>
.card {
	background-color: #fff;
	margin: 10px 10px;
	border-radius: 8px;
	padding: 12px 12px;
	transition: all 300ms ease;
	box-shadow: 0 2px 6px rgba(3, 121, 255, 0.05);
}
.title {
	font-size: 16px;
	margin: 6px 0 14px;
	font-weight: bold;
	.u-icon {
		margin-right: 3px;
	}
}
</style>
